import React, { Component } from 'react'
import { Modal, Button, message, Table, Form, Input, Select } from 'antd';
import axios from 'axios'
import './staff.css'
const columns = [
    {
        title: '工号',
        dataIndex: 'key',
        key: 'key',
        width: 150,
    },
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 150,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        ellipsis: true,
    },
    {
        title: '手机号',
        dataIndex: 'phoneNum',
        key: 'phoneNum',
        ellipsis: true,
    },
    {
        title: '在职状态',
        dataIndex: 'working',
        key: 'working',
        ellipsis: true,
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <span>
                <App rowdata={record} />
            </span>
        ),
    },
];
const { confirm } = Modal;
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};
class StaffList extends Component {
    constructor() {
        super()
        this.state = {
            listdata: [],
            addstaffmo: false,
            addstaffobj: {},
            searchText: ''
        }
    }
    handleOk = e => {
        this.setState({
            addstaffmo: false,
        });
        console.log(this.state.addstaffobj);
        axios({
            url: 'http://123.57.67.148:3000/mock/51/bsaddstaff',
            method: 'post',
            data: this.state.addstaffobj
        }).then(res => {
            if (res.data.code === 200) {
                this.staffgetdata()
                message.success("添加成功");
            }

        })

    };
    handleCancel = e => {
        this.setState({
            addstaffmo: false,
        });
    };
    staffgetdata = () => {
        axios({
            url: 'http://123.57.67.148:3000/mock/51/bsgeterjieduan',
            method: 'get'
        }).then(res => {
            let obj = res.data.data.filter((i) => {
                i.key = i.id
                delete i.id
                i.working ? i.working = '在职' : i.working = '离职'
                return i
            })
            this.setState({
                listdata: obj
            })
        })
    }
    tianjia = () => {
        this.setState({
            addstaffmo: true
        })
    }
    getInputval = (e, name) => {
        // console.log('执行了');
        let val = Object.assign({}, this.state.addstaffobj, typeof e === 'string' ? { [name]: e } : { [name]: e.target.value })
        this.setState({
            addstaffobj: val
        })
        // console.log(this.state.addstaffobj);
    }
    componentDidMount() {
        this.staffgetdata()
    }
    searchInput = (e) => {
        this.setState({
            searchText: e.target.value
        })
    }
    searchBtn = () => {
        this.state.searchText!==''&&axios({
                url: 'http://123.57.67.148:3000/mock/51/bsSearchStaff',
                method: 'post',
                data: this.state.searchText
            }).then(res => {
                if (res.data.code === 200) {
                    message.success('搜索成功')
                    let obj = res.data.data.filter((i) => {
                        i.key = i.id
                        delete i.id
                        i.working ? i.working = '在职' : i.working = '离职'
                        return i
                    })
                    this.setState({
                        listdata: obj
                    })
                }
            })
    }
    searchReset = () => {
        this.staffgetdata()
        this.setState({
            searchText:''
        })
    }
    render() {
        return (
            <div>
                <Table
                    bordered
                    pagination={{ pageSize: 8, position: ['bottomCenter'] }}
                    columns={columns}
                    dataSource={this.state.listdata}
                    title={() => <div className='searchBox'>
                        <div style={{ display: 'flex', width: '20%' }}>
                            <Input placeholder='输入员工姓名' onChange={this.searchInput} value={this.state.searchText} />
                            <Button onClick={this.searchBtn}>搜索</Button>
                            <Button onClick={this.searchReset}>重置</Button>
                        </div>
                        <Button onClick={this.tianjia} type="primary" >添加员工</Button>
                    </div>
                    }
                />
                <Modal
                    title="添加"
                    okText="确认"
                    cancelText="取消"
                    visible={this.state.addstaffmo}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form
                        name="basic"
                        {...layout}
                    >
                        <Form.Item label='姓名'>
                            <Input onChange={(e) => this.getInputval(e, 'name')} />
                        </Form.Item>
                        <Form.Item label='邮箱'>
                            <Input onChange={(e) => this.getInputval(e, 'email')} />
                        </Form.Item>
                        <Form.Item label='手机号'>
                            <Input onChange={(e) => this.getInputval(e, 'phoneNum')} />
                        </Form.Item>
                        <Form.Item label='是否在职'>
                            <Select onChange={(e) => this.getInputval(e, 'working')} >
                                <Select.Option value='true'>在职</Select.Option>
                                <Select.Option value="false">离职</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
class App extends React.Component {
    state = { visible: false, rowdata: {} };
    showModal = () => {
        // console.log( this.props.rowdata);
        this.setState({
            visible: true,
            rowdata: this.props.rowdata
        });
    };

    handleOk = e => {
        console.log(this.state.rowdata);
        this.setState({
            visible: false,
        });
        message.success("删除成功");
    };
    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    setMyData = (name, value) => {
        let a = Object.assign({}, this.state.rowdata, { [name]: value })
        this.setState({
            rowdata: a
        })
    }
    nameChange = (name) => {
        return (e) => typeof e === 'string' ? this.setMyData(name, e) : this.setMyData(name, e.target.value)
    }
    deleteList = () => {
        let obj = this.props.rowdata
        confirm({
            title: '删除员工',
            content: '一旦删除不可恢复，请确定是否要删除',
            okText: "确认",
            cancelText: "取消",
            onOk() {
                axios({
                    url: 'http://123.57.67.148:3000/mock/51/bsdeletestaff',
                    method: 'delete',
                    data: {
                        id: obj.id
                    }
                }).then(res => {
                    if (res.status === 200) {
                        message.success("删除成功");
                    }
                })
            }
        });
    }
    render() {
        return (
            <div>
                <Button onClick={this.showModal} style={{ marginRight: 16 }} size="small" type="primary">修改</Button>
                <Button onClick={this.deleteList} style={{ marginRight: 16 }} size="small" type="danger">删除</Button>
                <Modal
                    title="编辑"
                    okText="确认"
                    cancelText="取消"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form
                        name="basic"
                        {...layout}
                    >
                        <Form.Item label='工号'>
                            <Input disabled value={this.state.rowdata.key} />
                        </Form.Item>
                        <Form.Item label='姓名'>
                            <Input onChange={this.nameChange('name')} value={this.state.rowdata.name} />
                        </Form.Item>
                        <Form.Item label='邮箱'>
                            <Input onChange={this.nameChange('email')} value={this.state.rowdata.email} />
                        </Form.Item>
                        <Form.Item label='手机号'>
                            <Input onChange={this.nameChange('phoneNum')} value={this.state.rowdata.phoneNum} />
                        </Form.Item>
                        <Form.Item label='是否在职'>
                            <Select value={this.state.rowdata.working} onChange={this.nameChange('working')}>
                                <Select.Option value='在职'>在职</Select.Option>
                                <Select.Option value="离职">离职</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
export default StaffList